<template>
    <div>
        <el-row>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                        <el-form-item label="员工姓名">
                            <el-input v-model="queryMap.empName" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="所属部门">
                            <el-select v-model="queryMap.deptId"  clearable>
                                <el-option
                                        v-for="dept in deptList" :key="dept.deptId" :label="dept.deptName"
                                        :value="dept.deptId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="8" >
                <el-button-group>
                    <el-button icon="el-icon-plus" type="primary" @click="openAdd">新增</el-button>
                    <el-button icon="el-icon-edit" type="primary" @click="openEdit">修改</el-button>
                    <el-button icon="el-icon-delete" type="primary" @click="delEmp">删除</el-button>
                    <el-button icon="el-icon-delete" type="primary" @click="resetPassword">重置密码</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <!--handleSelectionChange-->
        <el-table
                :data="tableData"
                :height="530"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
            >
            <el-table-column
                    prop="empId"
                    type="selection"
            >

            </el-table-column>
            <el-table-column
                    label="序号"
                    type="index"
                    width="60"
            >
            </el-table-column>
            <el-table-column
                    label="员工姓名"
                    prop="empName"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                label="用户名"
                prop="username"
                width="180"
            >
            </el-table-column>
            <el-table-column
                    label="员工角色"
                    prop="role"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    v-if="false"
                    label="部门编号"
                    prop="deptId"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    label="部门名称"
                    prop="deptName"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    v-if="false"
                    label="性别编号"
                    prop="genderId"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="gender"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                label="电话号码"
                prop="phone"
                width="120"
            >
           </el-table-column>
            <el-table-column
                    label="入职日期"
                    prop="hiredate"
                    width="200"
                    align="center"
            >
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :page-sizes="[10, 20, 50, 100, 200]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
        <EmpForm
            :isEdit="isEdit"
            :formVisible.sync = "formVisible"
            :formData="formData"
            :deptList="deptList"
            :roleList="roleList"
            @submitForm="save"
        ></EmpForm>
    </div>
</template>

<script>
import EmpForm from "@/views/emp/EmpForm.vue";
export default {
    name: "EmpView",
    components: {EmpForm},
    data(){
        return{
            //查询条件
            queryMap: {
                empName: '',
                deptId: '',
                page: 1,  // 当前页码
                limit: 10 // 每页条数
            },
            isEdit:false,
            //总条数
            total:0,
            deptList:[],
            tableData:[],
            roleList:[],
            formData:{
                empId:'',//员工编号
                username:'',//用户名
                empName: '',//员工姓名
                roleId: '',//角色编号
                genderId: 1,//性别编号
                deptId: 0,//部门编号
                phone: '',//手机号码
                hiredate: '',//入职日期
            },
            formVisible: false,
            multipleSelection:[]//复选框的数据
        }
    },
    methods:{
        // 查询所有部门
        getDeptList() {
            const self = this;
            this.$http.get('deptList').then(res => {
                self.deptList = res.data;
            }).catch(error => {
                this.$message.error('查询部门失败，请联系管理员')
            })
        },
        //查询所有角色
        getRoleList() {
            const self = this;
            this.$http.get('roleList').then(res => {
                self.roleList = res.data;
            }).catch(error => {
                this.$message.error('查询角色失败，请联系管理员')
            })
        },
        // 点击查询按钮
        search() {
            // 重置页面未第一页
            this.queryMap.page = 1;
            this.getEmpList();
        },
        // 查询员工信息
        getEmpList() {
            const self = this
            this.$http.post('getEmpByPage', this.queryMap).then(res => {
                self.tableData = res.data.emps
                self.total = res.data.count
            }).catch(() => {
                this.$message.error('获取员工列表失败，请联系管理员')
            })
        },
        // 每页条数改变，val是改变后的每页条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1;
            this.getEmpList()
        },
        // 页码改变，val是修改后的页面
        handleCurrentChange(val) {
            this.queryMap.page = val;
            this.getEmpList();
        },
        //点击复选框触发,val是勾选中的数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 点击新增按钮
        openAdd() {
            this.isEdit = false
            // 重置表单
            this.formData={
                empId:'',//员工编号
                empName: '',//员工姓名
                username: '',//用户名
                roleId: '',//角色编号
                genderId: '',//性别编号
                deptId: '',//部门编号
                phone: '',//手机号码
                hiredate: '',//入职日期
            }
            this.formVisible = true
        },
        //点击修改按钮
        openEdit() {
            const self = this
            //判断是否选中了一条数据,
            if (self.multipleSelection.length === 0) {
                self.$message({
                    type: 'warning',
                    message: "请选择要修改的数据"
                })
            } else if (self.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: "只能选择一条数据"
                })
            } else {
                //获取选中行的主键
                let empId = this.multipleSelection[0].empId;
                this.$http.get("/getEmpById/" + empId).then(res => {
                    //根据主键获取要修改的数据
                    self.formData = res.data
                    self.isEdit = true
                    self.formVisible = true
                }).catch(error => {
                    self.$message.error("获取员工对象失败")
                })
            }
        },
        //删除员工
        delEmp(){
            const self = this
            //判断是否选中了一条数据,
            if(this.multipleSelection.length ===0){
                self.$message({
                    type:'info',
                    message:"请选择要删除的数据"
                })
                return
            }
            //询问用户
            this.$confirm('确定删除该员工吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确认的回调
                //存放要删除的员工的主键
                let empArr = [];
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    empArr.push(self.multipleSelection[i].empId)
                }

                if (empArr.includes(parseInt(this.$store.state.user.empId))){
                    self.$message.error("删除员工失败,所选员工不能包含本人")
                    return false
                }
                self.$http.post('delEmp',empArr).then(res =>{
                    if (res.data==='success'){
                        self.$message({
                            type:"success",
                            message:"删除成功"
                        })
                        //刷新列表
                        self.queryMap.page=1;
                        self.getEmpList()

                    }else {
                        self.$message.error(res.data)
                    }
                }).catch(()=>{
                    self.$message.error("删除员工失败,请联系管理员")
                })
            }).catch(() => {
                //点击取消的回调
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 保存新增
        save(formData) {
            //判断新增还是修改
            if (!this.isEdit){
                this.$http.post("addEmp",formData).then(res=>{
                    if (res.data ==='success'){
                        this.$message({
                            type:'success',
                            message:'保存成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page=1;
                        this.getEmpList();
                    }else {
                        this.$message.error("保存失败")
                    }
                }).catch(()=>{
                    this.$message.error("保存失败,请...")
                })
            }else {
                this.$http.post("editEmp",formData).then(res=>{
                    if (res.data ==='success'){
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page=1;
                        this.getEmpList();
                    }else {
                        this.$message.error(res.data)
                    }
                }).catch(()=>{
                    this.$message.error("修改员工失败,请...")
                })
            }
        },
        resetPassword(){
            const self = this
            //判断是否选中了一条数据,
            if (self.multipleSelection.length === 0) {
                self.$message({
                    type: 'warning',
                    message: "请选择要修改的数据"
                })
            } else if (self.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: "只能选择一条数据"
                })
            } else {
                //获取选中行的主键
                let empId = this.multipleSelection[0].empId;
                this.$http.get("/resetPassword/" + empId).then(res => {
                    //根据主键获取要修改的数据
                    if (res.data ==='success') {
                        self.$message({
                            type:"success",
                            message:"重置员工密码成功,初始密码为:123456"
                        })
                    }else {
                        self.message.error("重置密码失败")
                    }
                }).catch(error => {
                    self.$message.error("获取员工对象失败")
                })
            }
        }
    },
    created() {
        this.getDeptList();
        this.getRoleList();
        this.getEmpList();
    }
}
</script>

<style scoped>

</style>